<template>
  <div>
    <div>响应性基础测试，ref展开：<Test1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>响应式状态解构：<Test2 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>计算值测试1：<ComputedTest1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>wacthEffect副作用测试1：<WatchEffectTest1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>wacth副作用测试1：<WatchTest1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>
      setup函数测试：<setupTest
        :title="testsetup"
        :name="testsetup2"
        @change="testsetup2 = testsetup2 + 2"
      />
      <button @click="testsetup = testsetup + 1">改变</button>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div>setup函数测试2：<setupTest2 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>provide/inject测试：<ProvideInjectTest1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>模板引用测试：<RefTest1 /></div>
    <br />
    <br />
    <br />
    <br />
    <div>模板引用测试2,在v-for中使用：<RefTest2 /></div>
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import Test1 from "./components/Test1.vue";
import Test2 from "./components/Test2.vue";
import ComputedTest1 from "./components/ComputedTest1.vue";
import WatchEffectTest1 from "./components/WatchEffectTest1.vue";
import WatchTest1 from "./components/WacthTest1.vue";
import setupTest from "./components/setupTest.vue";
import setupTest2 from "./components/setupTest2.vue";
import ProvideInjectTest1 from "./components/ProvideInjectTest1.vue";
import RefTest1 from "./components/RefTest1.vue";
import RefTest2 from "./components/RefTest2.vue";
export default {
  components: {
    Test1,
    Test2,
    ComputedTest1,
    WatchEffectTest1,
    WatchTest1,
    setupTest,
    setupTest2,
    ProvideInjectTest1,
    RefTest1,
    RefTest2,
  },
  data() {
    return {
      testsetup: "testsetup",
      testsetup2: "testsetup2",
    };
  },
};
</script>

<style>
</style>